<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${item.id} != null ? '编辑文章' : '新建文章'">编辑文章</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/css/style.css">
    <style>
        body{font-family: system-ui, -apple-system, Segoe UI, Roboto, PingFang SC, Microsoft YaHei, sans-serif;background:#f8fafc;color:#0f172a;margin:0}
        .container{max-width:800px;margin:0 auto;padding:2rem}
        .card{background:#fff;border-radius:.75rem;padding:1.25rem;border:1px solid #e2e8f0}
        .row{margin-bottom:1rem}
        label{display:block;margin-bottom:.4rem}
        input,textarea,select{width:100%;padding:.6rem .75rem;border:1px solid #e2e8f0;border-radius:.5rem}
        .actions{display:flex;gap:.5rem;justify-content:flex-end;margin-top:1rem}
        .btn{padding:.6rem 1rem;border:none;background:#6366f1;color:#fff;border-radius:.5rem;text-decoration:none}
        .secondary{background:#e2e8f0;color:#0f172a}
        textarea{min-height:260px}
        .editor-wrap{border:1px solid #e2e8f0;border-radius:.5rem}
        #toolbar-container{border-bottom:1px solid #e2e8f0}
        #editor-container{min-height:320px}
    </style>
</head>
<body>
<div class="container">
    <h2 th:text="${item.id} != null ? '编辑文章' : '新建文章'"></h2>
    <div class="card">
        <form method="post" th:action="@{/admin/article}" th:object="${item}">
            <input type="hidden" th:field="*{id}">
            <div class="row">
                <label>标题</label>
                <input type="text" th:field="*{title}" required>
            </div>
            <div class="row">
                <label>分类</label>
                <input type="text" th:field="*{category}">
            </div>
            <div class="row">
                <label>状态</label>
                <select th:field="*{status}">
                    <option value="draft">草稿</option>
                    <option value="published">已发布</option>
                </select>
            </div>
            <div class="row">
                <label>内容（富文本）</label>
                <!-- 隐藏的 textarea 仍然与后端绑定，用于提交 HTML 内容 -->
                <textarea id="content-field" th:field="*{content}" style="display:none"></textarea>
                <div class="editor-wrap">
                    <div id="toolbar-container"></div>
                    <div id="editor-container"></div>
                </div>
                <div style="color:#64748b;font-size:.9rem;margin-top:.25rem">使用 wangEditor 编辑内容，保存时会以 HTML 存储（图片最大 10MB）</div>
            </div>
            <div class="actions">
                <a class="btn secondary" th:href="@{/admin/articles}">返回</a>
                <button class="btn" type="submit">保存</button>
            </div>
        </form>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/@wangeditor/editor@latest/dist/index.min.js"></script>
<script>
  const { createEditor, createToolbar } = window.wangEditor || {};
  const textarea = document.getElementById('content-field');
  const editor = createEditor({
    selector: '#editor-container',
    html: textarea.value || '',
    config: {
      placeholder: '在此编写内容…',
      MENU_CONF: {
        uploadImage: {
          server: '/upload',
          fieldName: 'file',
          // 可选：限制大小与类型（前端校验，后端仍应校验）
          maxFileSize: 10 * 1024 * 1024,
          allowedFileTypes: ['image/png','image/jpeg','image/jpg','image/webp','image/gif']
        }
      }
    },
    mode: 'default'
  });
  createToolbar({ editor, selector: '#toolbar-container', mode: 'default' });
  // 提交时同步 HTML 到隐藏字段
  const form = document.querySelector('form');
  form.addEventListener('submit', function(){ textarea.value = editor.getHtml(); });
</script>
</body>
</html>
